@use "@/styles/markdown";
@use "@/styles/normalize";
@use "@/styles/highlightjs";
@use "@fancyapps/ui/dist/fancybox/fancybox.css";
@use "element-plus/theme-chalk/dark/css-vars.css";

* {
  line-height: var(--bleu-main-line-height);
  word-break: break-all;
  box-sizing: border-box;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    display: none;
  }
}

body,
html {
  padding: 0;
  margin: 0;
}

html[class="dark"] {
  --hljs-color: #abb2bf;
  --hljs-bg: #282c34;
  --hljs-comment-color: #7b7f88;
  --hljs-keyword: #c678dd;
  --hljs-section: #e06c75;
  --hljs-literal: #56b6c2;
  --hljs-addition: #98c379;
  --hljs-attr: #d19a66;
  --hljs-bullet: #61aeee;
  --hljs-built: #e6c07b;

  --bleu-text-color-primary: #bbb;
  --bleu-text-color-regular: #ddd;
  --bleu-text-color-secondary: #fff;
}

html[class="light"] {
  --hljs-color: #383a42;
  --hljs-bg: #fafafa;
  --hljs-comment-color: #a0a1a7;
  --hljs-keyword: #a626a4;
  --hljs-section: #e45649;
  --hljs-literal: #0184bb;
  --hljs-addition: #50a14f;
  --hljs-attr: #986801;
  --hljs-bullet: #986801;
  --hljs-built: #986801;

  --bleu-text-color-primary: #555;
  --bleu-text-color-regular: #222;
  --bleu-text-color-secondary: #000;
}

html {
  color: var(--bleu-text-color-primary);
  font-family: var(--bleu-main-family);

  /* theme */
  --bleu-theme-color-primary: var(--el-color-primary);
  --bleu-theme-color-1: var(--el-color-primary-dark-2);
  --bleu-theme-color-2: var(--el-color-primary-light-3);
  --bleu-theme-color-3: var(--el-color-primary-light-5);
  --bleu-theme-color-4: var(--el-color-primary-light-7);
  --bleu-theme-color-5: var(--el-color-primary-light-8);
  --bleu-theme-color-6: var(--el-color-primary-light-9);

  // bg
  --bleu-bg-color-page: var(--el-bg-color-page);
  --bleu-bg-color: var(--el-bg-color);
  --bleu-bg-color-overlay: var(--el-bg-color-overlay);

  // text
  --bleu-text-color-placeholder: var(--el-text-color-placeholder);
  --bleu-text-color-disabled: var(--el-text-color-disabled);

  // border
  --bleu-border-color-darker: var(--el-border-color-darker);
  --bleu-border-color-dark: var(--el-border-color-dark);
  --bleu-border-color: var(--el-border-color);
  --bleu-border-color-light: var(--el-border-color-light);
  --bleu-border-color-lighter: var(--el-border-color-lighter);
  --bleu-border-color-extra-light: var(--el-border-color-extra-light);

  // fill
  --bleu-fill-color-darker: var(--el-fill-color-darker);
  --bleu-fill-color-dark: var(--el-fill-color-dark);
  --bleu-fill-color: var(--el-fill-color);
  --bleu-fill-color-light: var(--el-fill-color-light);
  --bleu-fill-color-lighter: var(--el-fill-color-lighter);
  --bleu-fill-color-extra-light: var(--el-fill-color-extra-light);
  --bleu-fill-color-blank: var(--el-fill-color-blank);

  --el-text-color-primary: var(--bleu-text-color-primary) !important;
  --el-text-color-regular: var(--bleu-text-color-regular) !important;
}

.shine-text {
  background: linear-gradient(
    to right,
    #409eff,
    #2d8cf0,
    #5e72e4,
    #673bb7,
    #fa7298,
    #ff9700,
    #607d8b,
    #009688,
    #42b983,
    #906f61
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400% auto;
  animation: shine-animation 10s linear infinite alternate;

  @keyframes shine-animation {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: 100% center;
    }
  }
}

.fade-in-out {
  animation: opacity-animation 0.9s ease-in forwards;

  @keyframes opacity-animation {
    @for $index from 0 to 10 {
      #{$index * 10%} {
        opacity: math.div($index, 10);
      }
    }
  }
}
